;(function () {
  getWeather()
  function getWeather() {
    jQuery.support.cors = true
    $.ajax({
      url: 'https://devapi.qweather.com/v7/weather/now?key=c6df7f3c8f5f44aab89776abd5902b6e&location=104.516873,31.323662',
      type: 'GET',
      dataType: 'json',
      success: function (res) {
        //var res=JSON.parse(res);
        let now = res.now
        console.log(res)

        document.querySelector('#w_4').src =
          '../sl/128/' + now.icon + '.png'
        document.querySelector('#w_1').innerHTML = now.text
        document.querySelector('#w_2').innerHTML = now.temp + '°C'
        document.querySelector('#w_3').innerHTML = '四川省德阳市罗江区'
      },
      error: function (err) {
        console.log(err)
      },
    })
  }

  time()
  function time() {
    // 获取当前时间
    let timer = null
    timer = setTimeout(time, 1000)
    function time() {
      clearTimeout(timer)
      let now = new Date()
      let y = now.getFullYear(),
        m = now.getMonth() + 1,
        d = now.getDate(),
        h = now.getHours(),
        minutes = now.getMinutes(),
        s = now.getSeconds()
      document.querySelector('.now_time').innerHTML =
        '<p style="font-size:26px">' +
        n(h) +
        ':' +
        n(minutes) +
        ':' +
        n(s) +
        '</p><p>' +
        y +
        '/' +
        n(m) +
        '/' +
        n(d) +
        '</p>'
      timer = setTimeout(time, 1000)
    }
  }

  function n(h) {
    return h < 10 ? '0' + h : h
  }

  echarts_11()
  function echarts_11() {
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('echarts_11'))
    const option = {
      color: ['#FDC345', '#00AEA5'],
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          return (
            params[0].name +
            '<br/>' +
            params[0].marker +
            params[0].seriesName +
            '：' +
            params[0].value +
            '米<br/>' +
            params[1].marker +
            params[1].seriesName +
            '：' +
            params[1].value +
            '米'
          )
        },
      },
      grid: {
        top: 10,
        left: '3%',
        right: '4%',
        bottom: 20,
        containLabel: true,
      },
      legend: {
        data: ['安全水位线', '当前水位线'],
        icon: 'rect',
        itemWidth: 10,
        itemHeight: 6,
        itemGap: 10,
        orient: 'horizontal',
        x: 'center',
        bottom: 0,
        textStyle: {
          color: '#fff',
          fontSize: '12',
        },
      },

      calculable: true,
      xAxis: [
        {
          type: 'category',
          data: [
            '凯江',
            '凤雏村水库',
            '长堰村水库',
            '华兴村水库',
            '黄水河支沟',
          ],
          axisLabel: {
            textStyle: {
              color: '#bac0c0',
              fontWeight: 'normal',
              fontSize: 12,
            },
            interval: 0,
            rotate: 15,
          },
          // x轴线的颜色为   rgba(255,255,255,.2)
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)',
            },
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)',
            },
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#bac0c0',
              fontWeight: 'normal',
              fontSize: 12,
            },
            interval: 0,
          },
          // x轴线的颜色为   rgba(255,255,255,.2)
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)',
            },
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)',
            },
          },
        },
      ],
      series: [
        {
          name: '安全水位线',
          type: 'bar',
          data: [543, 625, 524.5, 501.5, 521.5],
        },
        {
          name: '当前水位线',
          type: 'bar',
          data: [543, 623, 480, 400, 355],
        },
      ],
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }
  echarts_5()
  function echarts_5() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts_5'))
    let color = ['#74A6F2', '#1CE7DC', '#F6B54B', '#EF702E', '#EC342F']
    const option = {
      color: color,
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          let str = params[0].name + '<br/>'
          params.forEach((item) => {
            str +=
              item.marker +
              item.seriesName +
              '：' +
              item.value +
              '万千瓦/时<br/>'
          })
          return str
        },
      },
      legend: {
        icon: 'rect',
        itemWidth: 10,
        itemHeight: 6,
        itemGap: 10,
        orient: 'horizontal',
        x: 'center',
        // y:'bottom',
        textStyle: {
          color: '#fff',
          fontSize: '12',
        },
        data: [
          '红旗电站',
          '新盛电站',
          '百宝电站',
          '骑龙电站',
          '华龙水电站',
          '回龙电站',
        ],
      },
      grid: {
        top: 50,
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2018年', '2019年', '2020年'],
        axisLabel: {
          textStyle: {
            color: '#bac0c0',
            fontWeight: 'normal',
            fontSize: 12,
          },
          interval: 0,
        },
        splitLine: {
          show: false,
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          textStyle: {
            color: '#bac0c0',
            fontWeight: 'normal',
            fontSize: 12,
          },
          interval: 0,
        },
        splitLine: {
          show: false,
        },
      },
      series: [
        {
          name: '红旗电站',
          type: 'line',
          stack: '总量',
          data: [135, 140, 156],
        },
        {
          name: '新盛电站',
          type: 'line',
          stack: '总量',
          data: [33, 51, 55],
        },
        {
          name: '百宝电站',
          type: 'line',
          stack: '总量',
          data: [50, 56, 55],
        },
        {
          name: '骑龙电站',
          type: 'line',
          stack: '总量',
          data: [52, 60, 62],
        },
        {
          name: '华龙水电站',
          type: 'line',
          stack: '总量',
          data: [102, 149, 120],
        },
        {
          name: '回龙电站',
          type: 'line',
          stack: '总量',
          data: [280, 295, 375],
        },
      ],
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }

  skill()
  function skill() {
    let myChart = echarts.init(document.querySelector('#echarts_4'))
    let myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6']
    let option = {
      color: ['#74A6F2', '#EF702E'],
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          return (
            params[0].name +
            '<br/>' +
            params[0].marker +
            params[0].seriesName +
            '：' +
            params[0].value +
            '万人<br/>' +
            params[1].marker +
            params[1].seriesName +
            '：' +
            params[1].value +
            '平方公里'
          )
        },
      },
      legend: {
        orient: 'horizontal',
        x: 'center',
        itemWidth: 10,
        itemHeight: 6,
        itemGap: 10,
        y: 'bottom',
        textStyle: {
          color: '#fff',
          fontSize: '12',
        },
        data: ['受威胁人口', '受威胁面积'],
      },
      grid: {
        left: 20,
        top: 35,
        right: '10',
        bottom: '20%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: ['万安', '金山', '新盛', '鄢家', '白马关', '调元', '略坪'],
          // 文本颜色为#4c9bfd  文字大小为 12
          axisLabel: {
            textStyle: {
              color: '#bac0c0',
              fontWeight: 'normal',
              fontSize: 12,
            },
            interval: 0,
          },
          // x轴线的颜色为   rgba(255,255,255,.2)
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)',
            },
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          nameTextStyle: {
            color: '#fff',
          },
          name: '受威胁人口',
          // 文本颜色为#4c9bfd  文字大小为 12
          axisLabel: {
            textStyle: {
              color: '#bac0c0',
              fontWeight: 'normal',
              fontSize: 12,
            },
          },
          // x轴线的颜色为   rgba(255,255,255,.2)
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)',
            },
          },
          // 修改分割线的颜色
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)',
            },
          },
        },
        {
          type: 'value',
          name: '受威胁面积',
          nameTextStyle: {
            color: '#fff',
          },
          axisLabel: {
            textStyle: {
              color: '#bac0c0',
              fontWeight: 'normal',
              fontSize: 12,
            },
          },
          min: 0,
          max: 500,
          // x轴线的颜色为   rgba(255,255,255,.2)
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)',
            },
          },
          // 修改分割线的颜色
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)',
            },
          },
        },
      ],
      series: [
        {
          name: '受威胁人口',
          // smooth: true,
          type: 'bar',
          // 单独修改线的样式

          barWidth: 20,
          // 填充区域

          // 设置拐点 小圆点
          symbol: 'circle',
          // 拐点大小
          symbolSize: 8,
          // 设置拐点颜色以及边框

          // 开始不显示拐点， 鼠标经过显示
          showSymbol: false,
          data: [7.5, 5, 3.94, 2.51, 0.21, 0.1, 0],
        },
        {
          name: '受威胁面积',
          // smooth: true,
          type: 'line',
          // 单独修改线的样式
          lineStyle: {
            color: '#FFA92C',
            width: 2,
          },
          // 填充区域

          // 设置拐点 小圆点
          symbol: 'circle',
          // 拐点大小
          symbolSize: 8,
          // 设置拐点颜色以及边框
          itemStyle: {
            color: '#FFA92C',
            borderColor: 'rgba(221, 220, 107, .1)',
            borderWidth: 12,
          },
          // 开始不显示拐点， 鼠标经过显示
          showSymbol: false,
          data: [3.1, 1.2, 2.5, 0.8, 1.5, 0.1, 0],
        },
      ],
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }

  flow()
  function flow() {
    let myChart = echarts.init(document.querySelector('#echarts_3'))
    let color = ['#74A6F2', '#1CE7DC', '#F6B54B', '#EF702E', '#EC342F']
    const option = {
      color: color,
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          let str = params[0].name + '<br/>'
          params.forEach((item) => {
            str +=
              item.marker + item.seriesName + '：' + item.value + '立方米/秒<br/>'
          })
          return str
        },
      },
      legend: {
        x: 'right',
        orient: 'vertical',
        icon: 'rect',
        itemWidth: 10,
        itemHeight: 6,
        itemGap: 10,
        data: ['凯江', '绵远河', '秀水河', '黄水河', '芙蓉溪'],
        textStyle: {
          color: '#fff',
          fontSize: '12',
        },
      },
      grid: {
        top: 10,
        left: '3%',
        right: '10%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2018年', '2019年', '2020年', '2021年'],
        axisLabel: {
          textStyle: {
            color: '#bac0c0',
            fontWeight: 'normal',
            fontSize: 12,
          },
          interval: 0,
        },
        splitLine: {
          show: false,
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          textStyle: {
            color: '#bac0c0',
            fontWeight: 'normal',
            fontSize: 12,
          },
          interval: 0,
        },
        splitLine: {
          show: false,
        },
      },
      series: [
        {
          name: '凯江',
          type: 'line',
          stack: '总量',
          data: [972, 972, 2070, 1200],
        },
        {
          name: '绵远河',
          type: 'line',
          stack: '总量',
          data: [295, 295, 725, 521],
        },
        {
          name: '秀水河',
          type: 'line',
          stack: '总量',
          data: [521, 521, 1030, 655],
        },
        {
          name: '黄水河',
          type: 'line',
          stack: '总量',
          data: [48, 48, 58.1, 36],
        },
        {
          name: '芙蓉溪',
          type: 'line',
          stack: '总量',
          data: [55.8, 55.8, 18.5, 27],
        },
      ],
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }

  netLength()
  function netLength() {
    let myChart = echarts.init(document.querySelector('#echarts_2'))
    let option = {
      color: ['#74A6F2', '#1CE7DC', '#F6B54B', '#EF702E', '#EC342F'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // Use axis to trigger tooltip
          type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
        },
        formatter: function (params) {
          let str = params[0].name + '<br/>'
          params.forEach((item) => {
            str += item.marker + item.seriesName + '：' + item.value + '个<br/>'
          })
          return str
        },
      },
      legend: {
        y: 'bottom',
        data: ['河流', '水库', '水电站', '山洪灾害区', '易洪区'],
        icon: 'rect',
        itemWidth: 10,
        itemHeight: 6,
        itemGap: 10,
        textStyle: {
          color: '#bac0c0',
          fontWeight: 'normal',
          fontSize: 12,
        },
      },
      grid: {
        top: '3%',
        left: '3%',
        right: '10%',
        bottom: '25%',
        containLabel: true,
      },
      xAxis: {
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: '#bac0c0',
            fontWeight: 'normal',
            fontSize: 12,
          },
        },
      },
      yAxis: {
        type: 'category',
        data: ['金山', '万安', '调元', '鄢家', '白马关', '新盛', '略坪'],
        axisLabel: {
          textStyle: {
            color: '#bac0c0',
            fontWeight: 'normal',
            fontSize: 12,
          },
        },
        inverse: true,
      },
      series: [
        {
          name: '河流',
          type: 'bar',
          stack: 'total',
          barWidth: 10,
          // label: {
          //     show: true
          // },
          itemStyle: {
            barBorderRadius: [10, 0, 0, 10],
          },
          emphasis: {
            focus: 'series',
          },

          data: [1, 5, 3, 3, 3, 0, 2],
        },
        {
          name: '水库',
          type: 'bar',
          stack: 'total',
          barWidth: 10,
          // label: {
          //     show: true
          // },
          emphasis: {
            focus: 'series',
          },
          data: [4, 5, 1, 13, 3, 9, 0],
        },
        {
          name: '水电站',
          type: 'bar',
          stack: 'total',
          barWidth: 10,
          // label: {
          //     show: true
          // },
          emphasis: {
            focus: 'series',
          },
          data: [2, 0, 0, 1, 1, 2, 0],
        },
        {
          name: '山洪灾害区',
          type: 'bar',
          stack: 'total',
          barWidth: 10,
          // label: {
          //     show: true
          // },
          emphasis: {
            focus: 'series',
          },
          data: [29, 11, 17, 4, 9, 1, 9],
        },
        {
          name: '易洪区',
          type: 'bar',
          stack: 'total',
          barWidth: 10,
          // label: {
          //     show: true
          // },
          itemStyle: {
            barBorderRadius: [0, 10, 10, 0],
          },
          emphasis: {
            focus: 'series',
          },
          data: [1, 1, 0, 0, 1, 0, 1],
        },
      ],
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }

  flow1()
  function flow1() {
    let myChart = echarts.init(document.querySelector('#echarts_1'))
    let option = {
      color: ['#74A6F2', '#EF702E'],
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          return (
            params[0].name +
            '<br/>' +
            params[0].marker +
            params[0].seriesName +
            '：' +
            params[0].value +
            '人<br/>' +
            params[1].marker +
            params[1].seriesName +
            '：' +
            params[1].value +
            '平方公里'
          )
        },
      },
      legend: {
        orient: 'horizontal',
        x: 'center',
        y: 'bottom',
        textStyle: {
          color: '#4c9bfd',
          fontSize: '12',
        },
        icon: 'rect',
        itemWidth: 10,
        itemHeight: 6,
        itemGap: 10,
        data: ['受威胁人口', '受威胁面积'],
      },
      grid: {
        left: '10',
        top: 15,
        right: '10',
        bottom: '10%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: [
            '联合水库',
            '泉水水库',
            '彭家坝水库',
            '罗家湾水库',
            '幸福水库',
          ],
          // 文本颜色为#4c9bfd  文字大小为 12
          axisLabel: {
            textStyle: {
              color: '#bac0c0',
              fontWeight: 'normal',
              fontSize: 12,
            },
            interval: 0,
            rotate: 15,
          },
          // x轴线的颜色为   rgba(255,255,255,.2)
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)',
            },
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '',
          // 文本颜色为#4c9bfd  文字大小为 12
          axisLabel: {
            textStyle: {
              color: '#bac0c0',
              fontWeight: 'normal',
              fontSize: 12,
            },
          },
          // x轴线的颜色为   rgba(255,255,255,.2)
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)',
            },
          },
          // 修改分割线的颜色
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)',
            },
          },
        },
        {
          type: 'value',
          name: '',
          axisLabel: {
            textStyle: {
              color: '#bac0c0',
              fontWeight: 'normal',
              fontSize: 12,
            },
          },
          min: 0,
          max: 500,
          // x轴线的颜色为   rgba(255,255,255,.2)
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)',
            },
          },
          // 修改分割线的颜色
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)',
            },
          },
        },
      ],
      series: [
        {
          name: '受威胁人口',
          // smooth: true,
          type: 'bar',
          // 单独修改线的样式

          barWidth: 20,
          // 填充区域

          // 设置拐点 小圆点
          symbol: 'circle',
          // 拐点大小
          symbolSize: 8,
          // 设置拐点颜色以及边框

          // 开始不显示拐点， 鼠标经过显示
          showSymbol: false,
          data: [30000, 30000, 24000, 21000, 20000],
        },
        {
          name: '受威胁面积',
          // smooth: true,
          type: 'line',
          // 单独修改线的样式
          lineStyle: {
            color: '#FFA92C',
            width: 2,
          },
          // 填充区域

          // 设置拐点 小圆点
          symbol: 'circle',
          // 拐点大小
          symbolSize: 8,
          // 设置拐点颜色以及边框
          itemStyle: {
            color: '#FFA92C',
            borderColor: 'rgba(221, 220, 107, .1)',
            borderWidth: 12,
          },
          // 开始不显示拐点， 鼠标经过显示
          showSymbol: false,
          data: [10, 9, 3, 5, 6],
        },
      ],
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }
  map()
  function coordSwitch(strDu, strFen, strMiao, len) {
    len = len > 6 || typeof len == 'undefined' ? 6 : len //精确到小数点后最多六位
    strDu =
      typeof strDu == 'undefined' || strDu == '' ? 0 : parseFloat(strDu)
    strFen =
      typeof strFen == 'undefined' || strFen == ''
        ? 0
        : parseFloat(strFen) / 60
    strMiao =
      typeof strMiao == 'undefined' || strMiao == ''
        ? 0
        : parseFloat(strMiao) / 3600
    var digital = strDu + strFen + strMiao
    if (digital == 0) {
      return ''
    } else {
      return digital.toFixed(len)
    }
  }


  function map() {
    $.get('./js/luojiang.json', function (geoJson) {
      let myChart = echarts.init(document.querySelector('#map'))

      echarts.registerMap('LJ', geoJson)
      let itemStyle = {
        normal: {
          borderColor: '#7AF1F0',
          borderWidth: 1,
          shadowColor: '#7AF1F0',
          shadowBlur: 3,
          areaColor: 'rgba(120,152,225, 0.05)',
        },
        emphasis: {
          areaColor: 'rgba(120,152,225, 0.1)',
        },
        zoom: 1.2,
      }
      
      var markPointData = [
        {"name":"金山镇马驰村 彭家坝","coord":["104.52073","31.428241"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"金山镇罗家湾村 罗家湾","coord":["104.56077","31.40026"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"新盛镇金龙村 幸福","coord":["104.69903","31.253716"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"鄢家镇壁山村 白土地","coord":["104.60530","31.301930"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"新盛镇土城村 战备","coord":["104.59761","31.252423"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"新盛镇天鹅村 白庙","coord":["104.61403","31.269225"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"新盛镇月亮村 一根松","coord":["104.61628","31.261769"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"新盛镇木龙村 团结(百善)","coord":["104.65686","31.301840"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"新盛镇罗汉村 尖梁子","coord":["104.62818","31.237811"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"新盛镇月亮村 聂家长堰","coord":["104.63282","31.261393"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"新盛镇苏桥村 团结(苏桥)","coord":["104.65151","31.260522"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"新盛镇宝镜村 宝镜","coord":["104.66532","31.279623"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"鄢家镇回龙场村 张家老埝","coord":["104.57305","31.228087"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"鄢家镇万安村 万安","coord":["104.58935","31.278770"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"鄢家镇新安堂村 新庵堂","coord":["104.58746","31.275579"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"鄢家镇高垭村 庙儿咀","coord":["104.56734","31.247754"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"鄢家镇新安堂村 旱场湾","coord":["104.58629","31.253625"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"鄢家镇新安堂村 泉水湾","coord":["104.57368","31.269564"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"鄢家镇高峰村 八一","coord":["104.56576","31.284107"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"鄢家镇长堰村 长堰","coord":["104.57607","31.281017"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"鄢家镇长堰村 和平","coord":["104.56244","31.269050"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"鄢家镇高峰村 高峰","coord":["104.56943","31.302049"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"鄢家镇七里村 凤凰","coord":["104.53035","31.281640"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"鄢家镇长堰村 青峰","coord":["104.53764","31.273168"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"金山镇谭家坝村 石庙子","coord":["104.57318","31.346288"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"金山镇金山社区 张家湾","coord":["104.56122","31.376337"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"万安镇响石社区 牛角堰","coord":["104.54110","31.331626"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"万安镇华兴村 兴隆","coord":["104.59425","31.310473"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"万安镇凯江社区 五里堆","coord":["104.51941","31.324863"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"万安镇长虹社区 联合","coord":["104.49438","31.281682"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"万安镇泉水社区 泉水","coord":["104.48987","31.304368"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"白马关镇万佛村 万佛寺","coord":["104.46519","31.265859"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"白马关镇换马村 玉溪湖","coord":["104.46718","31.329702"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"白马关镇凤雏村 凤雏","coord":["104.47203","31.288324"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"调元镇百花村 砚台石","coord":["104.47740","31.377689"],"itemStyle":{"normal":{"color":colors.sk}},},{"name":"新盛镇金铃村 红旗电站","coord":["104.6213878","31.30921372"],"itemStyle":{"normal":{"color":colors.sdz}},},{"name":"新盛镇天鹅村 ","coord":["104.6268972","31.27024525"],"itemStyle":{"normal":{"color":colors.sdz}},},{"name":"金山镇谭家坝村 ","coord":["104.5697585","31.36531145"],"itemStyle":{"normal":{"color":colors.sdz}},},{"name":"金山镇谭家坝村 ","coord":["104.5698618","31.39267667"],"itemStyle":{"normal":{"color":colors.sdz}},},{"name":"白马关镇海棠村 ","coord":["104.5203038","31.25383289"],"itemStyle":{"normal":{"color":colors.sdz}},},{"name":"鄢家镇高垭村 ","coord":["104.546756","31.23066183"],"itemStyle":{"normal":{"color":colors.sdz}},},
        {name: '金山镇凯江黄水河水系二龙沟', coord: [coordSwitch(104,36,08),coordSwitch(31,19,52)], itemStyle: {normal: {color: colors.shzh}}, },
        {name: '白马关镇沱江流域广济桥山洪沟', coord: [coordSwitch(104,26,24),coordSwitch(31,17,24)], itemStyle: {normal: {color: colors.shzh}}, },
        {name: '鄢家镇凯江支沟', coord: [coordSwitch(104,34,07),coordSwitch(31,15,30)], itemStyle: {normal: {color: colors.shzh}}, },
        {name: '调元镇凯江', coord: [coordSwitch(104,27,37),coordSwitch(31,22,21)], itemStyle: {normal: {color: colors.shzh}}, },
        {name: '万安镇芙蓉溪河', coord: [coordSwitch(104,29,16),coordSwitch(31,19,10)], itemStyle: {normal: {color: colors.shzh}}, },
        {name: '略坪镇绵远河', coord: [coordSwitch(104,24,41),coordSwitch(31,22,00)], itemStyle: {normal: {color: colors.shzh}}, },
        {name: '新盛镇子金河', coord: [coordSwitch(104,37,16),coordSwitch(31,18,07)], itemStyle: {normal: {color: colors.shzh}}, },
      ];
      myChart.setOption(
        (option = {
          title: {
            text: '',
            color: '#fff',
            x: '20px',
            y: '20px',
            // subtext: '人口密度数据来自Wikipedia',
            textStyle: {
              color: '#fff',
            },
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>',
          },

          geo: {
            show: true,
            map: 'LJ',
            label: {
              emphasis: {
                show: false,
              },
            },
            roam: false,
            itemStyle: {
              normal: {
                borderColor: '#4085d3',
                areaColor: 'rgba(120,152,225, 0.00)',
              },
              emphasis: {
                // areaColor: '#4f92fa'  //鼠标移上每一省份的颜色
                areaColor: 'rgba(120,152,225, 0.1)',
              },
            },
          },

          series: [
            {
              name: '香港18区人口密度',
              type: 'map',
              mapType: 'LJ', // 自定义扩展图表类型
              label: {
                show: true,
                color: '#fff',
              },
              markPoint: {
                symbolSize: window.subSymbolSize,
                symbol: window.symbolPath,
                symbolOffset: [0, '-50%'],
                //图表标注。
                data: markPointData,
              },
              itemStyle: itemStyle,
              // zoom: 1.2,
              // opacity: 0.3,
              // data: [
              //     {name: '蟠龙镇', value: 20057.34, itemStyle:itemStyle},
              //     {name: '金山镇', value: 31686.1,itemStyle:itemStyle },
              //     {name: '鄢家镇', value: 44045.49,itemStyle:itemStyle },
              //     {name: '新盛镇', value: 40689.64,itemStyle:itemStyle },
              //     {name: '略坪镇', value: 37659.78,itemStyle:itemStyle },
              //     {name: '白马关镇', value: 45180.97,itemStyle:itemStyle },
              //     {name: '调元镇', value: 55204.26,itemStyle:itemStyle },
              //     {name: '万安镇', value: 21900.9,itemStyle:itemStyle },

              // ],
            },
          ],
        })
      )
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      myChart.on('click', function (params) {
        //点击事件
        if (params.componentType === 'markPoint') {
        } else {
        }
      })
    })
  }

  let legends = [
    {color: colors.sk, name:'水库'},
    {color: colors.sdz, name:'水电站'},
    {color: colors.shzh, name:'山洪灾害'},
    {color: colors.yhq, name:'易洪区'},
  ]
  let li = '';
  for(let legend of legends){
      li+=' <li> <i class="color-icon" style="background-color: '+ legend.color +';"></i>'+ legend.name +'</li>'
  }
  document.querySelector(".map-legend").innerHTML=li;

  area()
  function area() {
    let myChart = echarts.init(document.querySelector('#echarts_0'))
    let option = {
      color: ['#74A6F2', '#1CE7DC', '#F6B54B', '#EF702E', '#EC342F'],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}个 ({d}%)',
      },
      legend: {
        y: 'bottom',
        data: ['河流', '水库', '水电站', '山洪灾害区', '易洪区'],
        icon: 'rect',
        itemWidth: 10,
        itemHeight: 6,
        itemGap: 10,
        textStyle: {
          color: '#bac0c0',
          fontWeight: 'normal',
          fontSize: 12,
        },
      },
      series: [
        {
          name: '隐患点类型',
          type: 'pie',
          radius: ['10%', '70%'],
          center: ['50%', '40%'],
          // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
          label: {
            fontSize: 10,
          },
          // 引导线调整
          labelLine: {
            // 连接扇形图线长
            length: 6,
            // 连接文字线长
            length2: 5,
          },
          // roseType: "radius",
          data: [
            { value: 5, name: '河流' },
            { value: 35, name: '水库' },
            { value: 6, name: '水电站' },
            { value: 80, name: '山洪灾害区' },
            { value: 4, name: '易洪区' },
          ],
        },
      ],
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }
})()
